<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        
        li{
            list-style: none;
            line-height: 40px;
            border: 1px dashed #333;
        }
        .list{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <button class="addEle">新增元素</button>
        <button class="addText">新增文本</button>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
   
</body>
<script>
    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");
    var addEle = document.querySelector(".addEle");
    var addText = document.querySelector(".addText");
    console.log(addEle);

    // 点击按钮 新增一个li =>放到ul中

    // 如何新增元素节点 (li)   => 被新增的li默认是存储在内存当中的,只有放到页面中才会展示
    // document.createElement(tagName)   传入一个标签名,创建一个对应类型的元素 => 返回被创建的元素(元素节点)
    // document.createTextNode(string)   根据传入的文本内容,创建一个文本节点 => 返回被创建的文本节点

    // 将新增的节点放到父节点中    => 由父节点统筹

    // 追加和预追加
    // parentNode.appendChild(node)      向匹配的元素(父节点/元素)中 追加 一个子元素(节点)  (追加:放在父节点中所有内容的最后方)
    // parentNode.append(node|string)    向匹配的元素(父节点/元素)中 追加 一个子节点(元素节点|string->文本节点)  (追加:放在父节点中所有内容的最后方)

    // parentNode.prepend(node|string)    向匹配的元素(父节点/元素)中 预追加 一个子节点(元素节点|string->文本节点)  (预追加:放在父节点中所有内容的最前方)

    
    // 插入同级 
    // parentNode.insertBefore(newNode,oldNode)       将一个节点(新的/已存在) 插入到 另一个节点(旧的)的前面


    addEle.onclick = function(){
        var li = document.createElement("li");  
        
        // 新增的元素节点 => 可以进行正常的属性设置 添加事件 样式
        li.className = "newLi";
        li.title = "hello";
        li.textContent = "我是新增的li";
        li.onclick = function(){
            alert(this.textContent);
        }
        console.log(li);


        // ul.appendChild(li);
        
        // ul.append(li);
        // ul.append("hello");

        // ul.prepend(li);

        // 将新增的li 放到 mid的前面
        // ul.insertBefore(li,mid);

        // 将新增的li 放到 mid的后面
        // ul.insertBefore(li,mid.nextElementSibling);


        // 放已存在的
        // ul.appendChild(ul.firstElementChild); // 将ul的第一个元素 放到 ul 的最后面


    }


    // 给新增的li中 添加文本内容
    addText.onclick = function(){
        var li = document.createElement("li");  
        
        // 新增的元素节点 => 可以进行正常的属性设置 添加事件 样式
        // 新增属性
        li.className = "newLi";
        li.title = "hello";

        // 设置文本
        li.textContent = "我是新增的li";

        // var text = document.createTextNode("哈哈哈");  //创建文本节点()
        // console.log(text,typeof text);
        // li.appendChild(text);  // 将文本节点放到li中

        var comment = document.createComment("哈哈哈");
        li.appendChild(comment);


        // 绑定事件
        li.onclick = function(){
            alert(this.textContent);
        }
        ul.appendChild(li);
    }

    // 封装一个方法随机颜色




  




</script>
</html>